<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    height: 2000px;
    border: 1px solid black;
    position: relative;
  }
  #box {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: absolute;
  }
  .btn-wrap {
    width: 500px;
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
<body>
  <!-- 考试要求：
    1 按下box，其1S变为圆形；松开鼠标，其1S回复原样。

    2 每次点击box，其获得一个随机背景颜色。

    3 可随意拖动box，但box不能被拖出视口。

    4 输入 x y 坐标，点击 go 按钮，box 从当前位置move到 x y 位置。
      若输入非法坐标， alert 提醒，box位置不变。
  -->
  <div id="box" class="box"></div>
  <div class="btn-wrap">
    <span>
      x: <input type="text" class="input-x">
    </span>
    <span>
      y: <input type="text" class="input-y">
    </span>
    <button class="btn">GO</button>
  </div>
</body>
</html>
<script src="./lodash.js"></script>
<script>

    //获取元素
    const box = document.querySelector('#box')
    const body = document.querySelector('body')
    const inputX = document.querySelector('.input-x')
    const inputY = document.querySelector('.input-y')
    const btn = document.querySelector('.btn')

    let bodyWidth = parseFloat(getComputedStyle(body).width);
    let bodyHeight = parseFloat(getComputedStyle(body).height);

    let boxWidth = parseFloat(getComputedStyle(box).width);
    let boxHeight = parseFloat(getComputedStyle(box).height);


    let offsetX = 0;
    let offsetY = 0;

    //随机颜色
    {
        function conversion(num) {
          if(num > 255){
              num = 255
          }
          if(num < 0){
              num = 0
          }
          return num < 16
          ? '0' + num.toString(16)
          : num.toString(16)
        }

        function randomColor(r,g,b){
          let Rgba = conversion(r)
          let Rgbb = conversion(g)
          let Rgbc = conversion(b)
          var arr = '#' + Rgba + Rgbb + Rgbc
          return arr
        }
        function randomMath(){
          let r = _.random(0,255)
          let g = _.random(0,255)
          let b = _.random(0,255)
          return randomColor(r,g,b)
        }
    }

    //鼠标移动函数
    {
      function move(e){
        const X = e.pageX - offsetX
        const Y = e.pageY - offsetY

        //判断是否出边界
        if(X < 0){
          X = 0;
        }else if(X > (bodyWidth - boxWidth)){
          X = bodyWidth - boxWidth
        }
        if(Y < 0){
          Y = 0;
        }else if(Y > (bodyHeight - boxHeight)){
          Y = bodyHeight - boxHeight
        }
        
        
        box.style.top = Y + 'px';
        box.style.left = X + 'px';
      }
    }
    //鼠标按下事件
    box.addEventListener('mousedown',(e) => {

      //鼠标按下，随机改变颜色
      box.style.background = randomMath();


        //鼠标按下，一秒变圆
      let stmp = 0;
      const set = setInterval(() => {

        box.style.borderRadius = stmp + '%'
        stmp += 5;
        if(let > 50){
          clearInterval(set)
        }
      },16)

      //获取坐标
      offsetX = e.offsetX;
      offsetY = e.offsetY;

      //鼠标移动
      document.addEventListener('mousemove',move)
    })

    //鼠标抬起
    box.addEventListener('mouseup',() => {
      //抬起，变回方形
      let stmp = 50;
      const set = setInterval(() => {

        box.style.borderRadius = stmp + '%'
        stmp = stmp - 5;
        if(let < 0){
          clearInterval(set)
        }

      },16)
      //清除移动函数
      document.removeEventListener('mousemove',move)
    })

    //点击GO
    // btn.addEventListener('onclick',(e) => {
    //   
      
    // })
    btn.onclick = function(){
      let GOX = parseInt(inputX.value);
      let GOY = parseInt(inputY.value);

      //判断，如果超过边框，自动到边框停止
      if(GOX < 0){
          GOX = 0;
        }else if(GOX > (bodyWidth - boxWidth)){
          GOX = bodyWidth - boxWidth
        }
        if(GOY < 0){
          GOY = 0;
        }else if(GOY > (bodyHeight - boxHeight)){
          GOY = bodyHeight - boxHeight
        }
        
      box.style.top = GOY + 'px';
      box.style.left = GOX + 'px';
    }



</script>